<script setup lang='ts'>
import { useDialogSelectProvider } from '~/dialogs/useDialogSelectProvider'

defineOptions({
  name: 'AppGameSearch',
})
const emit = defineEmits(['search', 'update:modelValue', 'updateSuppier'])

interface Props {
  vid?: string
  cid?: string
  modelValue: string
  storageKey?: string
  storageDefaultKey?: string
  placeholder?: string
  defaultList?: string[]
  suppliers?: any
}


const props = withDefaults(defineProps<Props>(), {
  storageKey: STORAGE_SEARCH_KEYWORDS_LIVE,
  storageDefaultKey: STORAGE_CLEAR_LIVE,
  defaultList: () => [
    'Monopoly',
    'Crazy Time',
    'Sweet Bonanza',
    'Money Train',
    'Reactoonz',
  ],
  placeholder: '', //() => t('search_game')
  suppliers: []
})

const { t } = useI18n()
const route = useRoute()
const { openDialogSelectProvider, compRef } = useDialogSelectProvider(() => ({ data: props.suppliers }), {
  closeCb: () => {
    emit('updateSuppier', compRef.value?.checked)
  }
})
const ty = ref(route.query.ty as string)
const placeholderText = computed(() => props.placeholder || t('search_game'))

const searchValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})
const keywordLive = ref(
  Local.get<any[]>(props.storageKey)?.value ?? [],
)
const isShowPop = ref(false)
let inputTimer: any = null
function onBaseSearchInput() {
  clearTimeout(inputTimer)
  inputTimer = setTimeout(() => {
    if (searchValue.value.length >= 3) {
      Local.set(props.storageDefaultKey, true)
      emit('search', searchValue.value)
      keywordLive.value = uniq([...keywordLive.value, searchValue.value])
      hidePop()
    }
  }, 500)
}
function onClickKeyword(k: string) {
  searchValue.value = k
}
function onCloseKeyword(k: string) {
  keywordLive.value.splice(keywordLive.value.findIndex(t => t === k), 1)
}

function clearKeyword() {
  keywordLive.value.length = 0
}
function onClear() {
  searchValue.value = ''

}
function showPop() {
  isShowPop.value = true
}
function hidePop() {
  setTimeout(() => {
    //wait click event
    isShowPop.value = false
  }, 100)

}

function intiKeyword() {
  if (!Local.get(props.storageDefaultKey)?.value) {
    Local.set(STORAGE_SEARCH_KEYWORDS_LIVE, props.defaultList)
    keywordLive.value = props.defaultList
  }
}
watchEffect(() => {
  if (keywordLive.value.length > 0) {
    Local.set(props.storageKey, keywordLive.value)
  } else {
    Local.remove(STORAGE_SEARCH_KEYWORDS_LIVE)
  }
})


intiKeyword()
</script>

<template>
  <div ref="gameSearchRef" class="app-game-search" style="--bc-input-bg: var(--color-bg-black-5);">

    <BaseInput class="text-sm font-semibold" @input="onBaseSearchInput" @focus="showPop" @blur="hidePop"
      :name="'search-' + Math.random().toString(36).substring(2)" search v-model="searchValue"
      :placeholder="placeholderText">
      <template v-if="suppliers.length > 0" #left-icon>
        <div class="flex items-center h-[1.125rem] pr-2 border-r-1 border-[var(--color-border-black-2)]"
          @click.stop="openDialogSelectProvider">
          <span class="text-xs font-normal mr-1">{{ $t('game_suppier') }}</span>
          <BaseIcon name="uni-arrow-down" class="text-xs" />
        </div>
      </template>
      <template v-if="searchValue" #right-icon>
        <BaseIcon @click.stop="onClear" name="uni-close2" class="text-[.625rem]" />
      </template>
    </BaseInput>
    <div v-if="isShowPop"
      class="absolute left-0 right-0 z-10 w-full rounded-[.25rem] border border-[#3A4142] bg-bg-black-3 py-4 px-2 top-full mt-4">
      <p class="text-center text-secondary font-semibold">{{ $t('search_need_at_least_3_word') }}</p>
      <div class="mt-3 flex items-center">
        <p class="font-extrabold">{{ $t('search_recent') }}</p>
        <div class="ml-auto text-secondary sm:cursor-pointer" @click="clearKeyword">{{ $t('search_clear') }} ({{
          keywordLive.length
          }})</div>
      </div>
      <div class="flex flex-wrap items-center gap-2 mt-3">
        <BaseTag v-for="text in keywordLive" :key="text" :text="text" @click="onClickKeyword" @close="onCloseKeyword" />
      </div>
    </div>
  </div>

</template>

<style lang='scss' scoped></style>
